<!--  -->
<template>
  <div class="container">
    <div class="form-box">
      <div class="back-box">
        <div class="btn-back" @click="goBack">
          <img src="@/assets/img/back.png" alt="" />
          <span>返回</span>
        </div>
        <div class="line"></div>
        <div class="name">添加学员</div>
      </div>
      <div class="form-item-box">
        <el-form
          label-width="100px"
          class="demo-ruleForm"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
        >
          <el-form-item label="头像" prop="name">
            <div class="photo">
              <button class="el-button el-button--default" @click.stop="goUp">
                上传图片
              </button>
              <div class="proposal">
                <i></i>
                <span>建议尺寸：100x100</span>
              </div>
            </div>
            <div class="img-box">
              <img :src="url" alt="" v-if="isSure" />
            </div>
          </el-form-item>
          <el-form-item label="昵称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="登录锁定" prop="lock">
            <el-switch></el-switch>
          </el-form-item>
          <el-form-item label="VIP" prop="name">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in role"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                @click.native.stop="roleClick(item.name, item.id)"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="bottom-menus-box">
        <button class="el-button el-button--primary" @click="saveClick">
          保存
        </button>
        <button class="el-button el-button--default" @click="goBack">
          取消
        </button>
      </div>
    </div>

    <div class="select-images-mask" v-if="isShow">
      <div class="select-images-box">
        <div class="select-images-title">
          <div class="left">
            <span>选择图片</span>
          </div>
          <div class="right">
            <input type="file" />
            <button class="el-button upbtn el-button--default">上传图片</button>
          </div>
        </div>

        <div class="menu-box">
          <div class="category-box">
            <div
              :class="
                index === activeIndex ? 'category-item active' : 'category-item'
              "
              v-for="(item, index) in categoryData"
              :key="index"
              @click="activeClick(index)"
            >
              {{ item.txt }}
            </div>
          </div>

          <div class="images-list">
            <div class="images-contanter" v-loading="loading">
              <div
                :class="index === UPIndex ? 'image-item active' : 'image-item'"
                v-for="(item, index) in resData"
                :key="item.id"
                @click.stop="upClick(index, item)"
              >
                <img :src="item.url" alt="" />
                <img
                  v-show="index === UPIndex"
                  src="@/assets/home/selected.png"
                  alt=""
                  class="select"
                />
                <div class="image-name">{{ item.name }}</div>
              </div>
            </div>
            <div class="pagination-box" v-if="show">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-size="15"
                layout="total, prev, pager, next, jumper"
                :total="110"
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="footer-box">
          <button
            class="el-button footer_btn el-button--primary"
            @click="sureClick"
          >
            确定
          </button>
          <button
            class="el-button footer_btn ml-30 el-button--default"
            @click="cancelClick"
          >
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getMemberCreate } from "@/network/member";
import { getImagesInfo } from "@/network/member";
import { addMemberInfo } from "@/network/member";
import { getMemberInfo } from "@/network/member";
import { setVIPUserInfo } from "@/network/member";
import { getUserInfo } from "@/network/member";
import { Message } from "element-ui";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      value: "",
      options: [],
      ruleForm: {
        name: "",
        mobile: "",
        password: "",
      },
      rules: {
        name: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      categoryData: [
        { txt: "全部课程" },
        { txt: "幻灯片" },
        { txt: "课程封面" },
        { txt: "课程详情页" },
        { txt: "文章配图" },
      ],
      activeIndex: 0,
      params: {
        page: 1,
        size: 15,
        from: 0,
      },
      MemberParams: {
        page: 1,
        size: 10,
        sort: "id",
        order: "desc",
        keywords: "",
      },
      addParams: {
        avatar: "",
        mobile: "",
        nick_name: "",
        password: "",
        role_id: "",
        role_expired_at: "",
      },
      setInfoParams: {
        user_ids: [],
        tag_ids: [],
        field: "",
        value: null,
        role_expired_at: "",
      },
      currentPage4: 1,
      isShow: false,
      resData: "",
      loading: true,
      show: true,
      UPIndex: "",
      isUp: false,
      url: "",
      isSure: false,
      role: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goBack: function () {
      this.$router.go(-1);
    },
    async created1() {
      let res = await getUserInfo();
      console.log(res);
    },
    saveClick:function(){
        
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.create1();
    // this.create2();
    // this.create3();
    // this.created5();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.container {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 5px 20px 20px;
  overflow-y: auto;
  background-color: #f1f2f9;
  .form-box {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;
    .back-box {
      width: 100%;
      height: auto;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      .btn-back {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        cursor: pointer;
        display: flex;
        align-items: center;

        img {
          width: 14px;
          height: 14px;
          margin-right: 4px;
        }
      }
      .btn-back:hover {
        color: #409eff;
      }
      .line {
        width: 1px;
        height: 14px;
        background-color: #d8d8d8;
        margin-right: 15px;
        margin-left: 15px;
      }

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }

    .form-item-box {
      ::v-deep .el-form {
        margin-bottom: 22px;
        .photo {
          display: flex;
          .proposal {
            margin-left: 10px;
            span {
              font-size: 14px;
              color: rgba(0, 0, 0, 0.5);
            }
          }
        }
        .img-box {
          margin-left: 100px;
          img {
            width: 100px;
            height: 100px;
          }
        }
      }
      ::v-deep .el-form-item__label {
        width: 200px !important;
      }
      ::v-deep .el-form-item__label::before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      }

      ::v-deep .el-input {
        // background-color: red;
        width: 200px;
      }
      ::v-deep .el-form-item__error {
        left: 101px;
      }
    }
    .bottom-menus-box {
      position: fixed;
      bottom: 0;
      left: 200px;
      right: 0;
      z-index: 2000;
      box-sizing: border-box;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      background-color: #fff;
      display: flex;
      box-shadow: 0 -2px 4px 0 hsl(0deg 0% 40% / 5%);
      button:last-child {
        margin-left: 24px;
      }
    }
  }
  .select-images-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2002;
    background-color: rgba(0, 0, 0, 0.5);
    .select-images-box {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 881px;
      height: 674px;
      background: #fff;
      margin-top: -337px;
      margin-left: -440.5px;
      box-sizing: border-box;
      .select-images-title {
        width: 100%;
        height: 70px;
        box-sizing: border-box;
        padding: 26px 30px;
        font-size: 18px;
        font-weight: 400;
        color: #333;
        line-height: 18px;
        display: flex;
        justify-content: space-between;
        .right {
          position: relative;
          input {
            position: absolute;
            opacity: 0;
            z-index: 2;
            right: 0;
            top: -9px;
          }
          button {
            position: absolute;
            right: 0;
            top: -9px;
            width: 116px;
          }
        }
      }
      .menu-box {
        width: 100%;
        height: 534px;
        // float: left;
        display: flex;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 30px;
        padding-bottom: 0;
        .category-box {
          width: 150px;
          height: auto;
          margin-right: 30px;
          border-right: 1px solid #d8d8d8;
          border-radius: 3px;
          .category-item {
            width: 100%;
            height: auto;
            box-sizing: border-box;
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 15px;
            padding-bottom: 15px;
            cursor: pointer;
            font-size: 15px;
            line-height: 15px;
            color: #333;
          }
          .category-item.active {
            background-color: #ebf6fe;
          }
        }
        .images-list {
          flex: 1;
          width: 100%;
          box-sizing: border-box;
          float: left;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          height: 100%;
          .images-contanter {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            height: 100%;
          }
          .image-item {
            // width: 110px;
            height: 145px;
            padding-right: 7px;
            background-color: #f4fafe;
            position: relative;
            .select {
              width: 30px;
              height: 30px;
              top: 50%;
              left: 50%;
              transform: translate(-15px, -15px);
            }
            img {
              width: 110px;
              height: 110px;
              position: absolute;
            }
            .image-name {
              width: 110px;
              height: auto;
              padding: 10px 5px;
              box-sizing: border-box;
              height: auto;
              font-size: 10px;
              font-weight: 400;
              color: #333;
              line-height: 15px;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .image-item.active {
            border: 2px solid #3ca7fa;
          }
          .pagination-box {
            width: 100%;
            text-align: center;
          }
        }
      }

      .footer-box {
        width: 100%;
        //   height: 41px;
        //   box-sizing: border-box;
        padding: 15px 30px;
        box-shadow: 0 -2px 4px 0 hsl(0deg 0% 40% / 5%);
      }
    }
  }
}
</style>